<template>
  <div class="detail">
    <el-card>
      <el-tabs>
        <el-tab-pane label="查看账户" lazy>
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label-width="100px" label="性名" prop="username">
              <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label-width="100px" label="密码" prop="password">
              <el-input v-model="form.password" type="password" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit">更新</el-button>
              <el-button>取消</el-button>
            </el-form-item>

          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" lazy>
          <!-- <info :user-info="userInfo" @toDetail="getUserInfo" /> -->
          <!-- 延迟加载:异步组件+动态组件的实现 -->
          <component :is="'info'" :user-info="userInfo" @toDetail="getUserInfo" />
        </el-tab-pane>
        <el-tab-pane label="岗位信息" lazy>
          <!-- <jobInfo /> -->
          <component :is="'jobInfo'" />
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>

<script>
import { sysuser } from '@/api/user.js'
// import info from './components/info.vue'
import { sysuserPut } from '@/api/employees.js'
export default {
  components: {
    // 异步组件+动态组件目的:延迟加载
    info: () => import('./components/info.vue'),
    jobInfo: () => import('./components/jon-info.vue')

  },
  data() {
    return {
      form: {
        username: '', //	string	非必须
        password: ''//	string	非必须
      },
      rules: {
        username: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      //   接收完整的用户信息
      userInfo: {}
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getUserInfo(val) {
      this.form.username = val.username
    },
    async  getInfo() {
      // 调用获取员工基本信息api接口,渲染页面
      // 注意:渲染用户信息密码不渲染出来---为了安全性
      const res = await sysuser(this.$route.params.id)
      this.form.username = res.data.username
      this.userInfo = res.data
    },
    submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          await sysuserPut(Object.assign({}, this.userInfo, this.form))
          this.getInfo()
          // 刷新当前页面
          location.reload()
          this.$message.success('更新成功')
        }
      })
    }

  }

}
</script>

<style>

</style>
